<template>
	<view class="download">
		<view class="head-tools-fixed">
			<search :value.sync="searchText" @searchStart="onBtnSearchStart" @onKeyWordSelect="onBtnSearchStart"></search>
			<view class="sign">请点击复制下载链接后，通过手机或电脑浏览器打开，即可下载对应文件。您也可以通过【金品教育科技】公众号，发送“下载专区”获取专区内容下载地址</view>
		</view>
		<container
		class="download-list-content"
			:isNoData="isNodata"
			:isLoading="loading"
			:nodata-option="{
				type: 'nobtn',
				icon: '/static/search-no-result.png',
				iconW: 540,
				iconH: 452,
				iconBottom: '80rpx',
				text: '<p>没有找到匹配的结果</p><p>建议您修改关键词重新搜索</p>'
			}"
		>
			<mescroll-body
				ref="mescrollRef"
				@init="mescrollInit"
				:down="{
					auto: false
				}"
				:up="{
					auto: false,
					textNoMore: '没有更多'
				}"
				@down="downLoad"
				@up="upLoad"
			>
				<view class="download-list">
					<view class="content">
						<download-item class="item" v-for="item in downloadList" :key="item.fileId" :name="item.fileName" :url="fileHost + item.filePath"></download-item>
					</view>
				</view>
			</mescroll-body>
		</container>
	</view>
</template>

<script>
import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js';
import search from '@/components/search/search.vue';
import downloadItem from '@/components/download-item/download-item.vue';
export default {
	mixins: [MescrollMixin],
	components: {
		search,
		downloadItem
	},
	data() {
		return {
			loading: false,
			fileHost: this.$imgHost,
			searchText: '', //搜索文本
			pageNum: 1, //当前页码
			pageSize: 10, //每页数量
			total: null, //总数
			downloadList: [
				// {
				// 	author: "十万个为什么 上册"
				// 	categoryId: 19
				// 	categoryName: "精品教材"
				// 	commodityCode: "100100100"
				// 	commodityId: 8
				// 	commodityName: "十万个为什么 上册"
				// 	commodityPic: "/profile/upload/afb37c4f-68ae-4411-9c47-b47a5353aa4d.jpg"
				// 	commodityRotationPic: "/profile/upload/eb0964ac-bb95-4439-8555-be233b96e3d6.jpg,/profile/upload/8600a944-2745-484f-82e8-5f99d2f98c62.jpg"
				// 	createTime: "2021-01-08 07:23:40"
				// 	cumulativeSales: null
				// 	freeMailStatus: 0
				// 	marketPrice: 100
				// 	orderNum: 0
				// 	postage: null
				// 	press: "十万个为什么 上册"
				// 	pressDate: "2021-01-12"
				// 	sellPrice: 100
				// 	status: 1
				// 	stock: 100
				// 	thirtyDayCumulativeSales: null
				// }
			]
		};
	},
	computed: {
		isNodata() {
			return this.downloadList.length < 1;
		}
	},
	watch: {
		searchText: function(newVal, oldVal) {
			// 无搜索文字清空
			if (!newVal || newVal == '') this.downloadList = [];
		}
	},
	methods: {
		init() {
			this.pageNum = 1; //页码
			this.pageSize = 10; //每页数量
			this.loading = true;
			this.searchStart().then(res => {
				this.loading = false;
			});
		},

		downLoad() {
			// 下拉刷新
			console.log('下拉刷新');
			this.pageNum = 1; //页码
			this.pageSize = 10; //每页数量
			this.mescroll.resetUpScroll();
			this.searchStart()
				.then(res => {
					// this.mescroll.endSuccess();
				})
				.catch(err => {
					// this.mescroll.endErr();
				});
		},
		upLoad() {
			// 上拉加载
			console.log('上拉加载');

			this.pageNum++;
			this.searchStart()
				.then(res => {
					// this.mescroll.endSuccess();
				})
				.catch(err => {
					// this.mescroll.endErr();
				});
		},
		// getSearchHistroy() {
		// 	return this.$store.dispatch('getSearchHistroy').then(res => {
		// 		console.log('搜索历史获取成功', res);
		// 	});
		// },
		onBtnSearchStart() {
			// if (this.searchText && this.searchText != '') {
			this.pageNum = 1; //页码
			this.pageSize = 10; //每页数量
			if(this.mescroll&&this.mescroll.resetUpScroll)
			this.mescroll.resetUpScroll();
			this.loading = true;
			this.searchStart()
				.then(res => {
					this.loading = false;
				})
				.catch(err => {
					this.loading = false;
				});
			// } else {
			// 	uni.showToast({
			// 		icon: 'none',
			// 		mask: true,
			// 		title: '请填写搜索关键字！',
			// 		duration: 2000
			// 	});
			// }
		},

		searchStart() {
			// 搜索开始
			return new Promise((resolve, reject) => {
				// let option = {};
				// if (this.searchText && this.searchText != '') option.searchValue = this.searchText;
				// if (this.searchText && this.searchText != '') {
				// this.loading = true;
				this.$store
					.dispatch('searchDownloadList', {
						searchValue: this.searchText,
						pageNum: this.pageNum, //页码
						pageSize: this.pageSize //每页数量
					})
					.then(res => {
						// this.loading = false;
						console.log('搜索成功', res);
						let data = res.data;
						this.total = data.total;
						if (this.pageNum == 1) this.downloadList = data.rows;
						else this.downloadList = [...this.downloadList, ...data.rows];

						if (this.total != null && this.pageNum * this.pageSize < this.total) {
							console.log('加载');
							this.mescroll.endSuccess(data.rows.length, true);
						} else {
							console.log('不加载', data.rows.length);
							this.mescroll.endSuccess(data.rows.length, false);
						}
						resolve(res);
					})
					.catch(err => {
						this.mescroll.endErr();
						reject(err);
					});
				// } else {
				// 	uni.showToast({
				// 		icon: 'none',
				// 		mask: true,
				// 		title: '请填写搜索关键字！',
				// 		duration: 2000
				// 	});
				// 	reject('请填写搜索关键字');
				// }
			});
		}
		// clearHistroy() {
		// 	// 清除搜索记录
		// 	this.$store.dispatch('clearHistroy').then(res => {
		// 		console.log('清除搜索记录成功', res);
		// 	});
		// }
	},
	onLoad() {
		this.init();
	}
};
</script>

<style lang="scss" scoped>
.download {
	width: 100%;
	height: 100%;
	// flex: 1;
	box-sizing: border-box;
	// background-color: #fff;
	display: flex;
	flex-direction: column;
	padding-top: 260rpx;
	.head-tools-fixed {
		width: 100%;
		box-sizing: border-box;
		padding: 22rpx 20rpx;
		background-color: #fff;
		position: fixed;
		z-index: 888;
		box-shadow: 0px 0px 20rpx #000000;
		/* #ifdef H5 */
		top: 44px;
		/* #endif */
		/* #ifdef MP */
		top: 0px;
		/* #endif */
		.sign{
			display: block;
			width: 100%;
			margin-top: 20rpx;
			padding: 10rpx;
			text-align: left;
			font-size: 25rpx;
			color: #C0C0C0;
			border-top: 2rpx solid #ddd;
		}
	}

	.download-list {
		display: block;
		padding: 20rpx 30rpx;
		.content {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			box-sizing: border-box;
			background-color: #fff;
			border-radius: 6px;
			width: 100%;
		}
		.item {
			width: 100%;
		}
		.item:nth-last-child(n + 2) {
			border-bottom: 2rpx solid #efeff0;
		}
	}
}
</style>
